<template>
	<div class="tabbar">
		<ul>
			<li
			v-for='(item,index) in routerList'
			:key='index'
			@click="switchTab(item.path)"
			>
			<!-- $route.path:当前选择路由，item.path:列表里有的路由，若相等则为当前选中的路由，显示高亮图片，否则则未被选中 -->
				<img :src="$route.path.includes(item.path) ? item.selected : item.active" alt="">
				<span :class='$route.path.includes(item.path) ? "active" : "" '>{{item.title}}</span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				routerList:[
					{
						title:'首页',
						path:'/home',
						active:'/imgs/home.png',
						selected:'/imgs/home-select.png'
					},
					{
						title:'分类',
						path:'/list',
						active:'/imgs/list.png',
						selected:'/imgs/list-select.png'
					},
					{
						title:'购物车',
						path:'/cart',
						active:'/imgs/cart.png',
						selected:'/imgs/cart-select.png'
					},
					{
						title:'我的',
						path:'/my',
						active:'/imgs/my.png',
						selected:'/imgs/my-select.png'
					}
				]
			}
		},
		methods:{
			switchTab( path ){
				//判断是否点击的是同一个路由
				if(this.$root.path == path) return;
				//对应跳转页面
				this.$router.push( path );
			}
		}
	}
</script>

<style scoped>
	.tabbar{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1.466667rem;
		background-color: #fff;
	}
	.tabbar ul{
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 100%;
	}
	.tabbar ul li{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tabbar ul li img{
		height: 0.7rem;
		width: 0.7rem;
	}
	.tabbar ul li span{
		font-size: 0.426667rem;
	}
	.active{
		color: red;
	}
</style>